<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <div class="content">
        <el-card class="box-card">
          <el-row :gutter="20">
            <el-col :span="19">
              <el-input v-model="searchid" style="width: 300px;" placeholder="请输入内容"></el-input>
            </el-col>
            <el-col :span="5">
              <el-button plain @click="searchclear">清空</el-button>
              <el-button type="primary" @click="searchlist">搜索</el-button>
            </el-col>
          </el-row>
          <el-row class="massage">
            <el-alert type="info" style="line-height:10px" :closable="false">
              <template>
                <i class="el-icon-info">有{{ formData.counts }}条数据</i>
              </template>
            </el-alert>
          </el-row>
          <el-row>
            <!-- "tableData.slice((currentPage - 1) * pageSize,currentPage * pageSize)" -->
            <el-table
              :data="
            tableData.slice(
              (page.page - 1) * page.pagesize,
              page.page * page.pagesize
            )
          "
              style="width: 100%"
            >
              <el-table-column prop="id" label="编号" width="200"></el-table-column>
              <el-table-column label="题型" width="80">
                <template v-slot="{ row }">
                  <span v-if="row.questionType === '1'">单选</span>
                  <span v-if="row.questionType === '2'">多选</span>
                  <span v-if="row.questionType === '3'">简答</span>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="questionIDs" width="200" label="题目编号">
                <template v-slot="{ row }">
                  <div
                    v-for="(item, index) in row.questionIDs"
                    :key="index"
                    @click="questionID(item.id)"
                  >{{ item.number }}</div>
                </template>
              </el-table-column>
              <el-table-column prop="addTime" label="录入时间" width="180" align="center"></el-table-column>
              <el-table-column prop="totalSeconds" label="答题时间（s）" width="180" align="center">
                <template v-slot="{ row }">
                  <span>{{ row.totalSeconds }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="accuracyRate" label="正确率（%）" width="180" align="center"></el-table-column>
              <el-table-column prop="userName" label="录入人" width="180" align="center"></el-table-column>
              <el-table-column align="center" label="操作">
                <template v-slot="{ row }">
                  <el-button
                    type="danger"
                    icon="el-icon-delete"
                    circle
                    plain
                    @click="delUser(row.id)"
                  ></el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
          <!-- 分页 -->
          <el-row type="flex" justify="space-between" class="massage">
            <el-col :offset="12" :span="12">
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.page"
                :page-sizes="[3, 5, 10, 15]"
                :page-size="page.pagesize"
                layout=" prev, pager, next, sizes, jumper"
                :total="formData.counts"
              ></el-pagination>
            </el-col>
          </el-row>
        </el-card>
        <vp v-if="vpshow" v-model="vpshow" :id="id"></vp>
      </div>
    </div>
  </div>
</template>

<script>
import data from '@/assets/data.json'
import vp from './viewpost.vue'
export default {
  components: {
    vp
  },
  data() {
    return {
      tableData: [],
      page: {
        page: 1,
        pagesize: 10
      },
      currentPage4: '3',
      dialogVisible: false,
      text: '创建用户',
      formData: {},
      vpshow: false,
      id: '',
      searchid: ''
    }
  },
  created() {
    this.formData = data
    this.tableData = data.items
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.page.pagesize = val
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.page.page = val
    },
    handleClose() {
      this.dialogVisible = false
    },
    questionID(id) {
      console.log(id)
      this.id = id
      this.vpshow = true
    },
    delUser(id) {
      const res = this.tableData.filter(item => {
        return item.id !== id
      })
      this.tableData = res
    },
    searchlist() {
      const res = this.tableData.filter(item => {
        return item.id === this.searchid
      })
      this.tableData = res
    },
    searchclear() {
      this.tableData = data.items
      this.searchid = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.content {
  width: 100%;
  height: 100%;
}
.massage {
  margin: 15px;
}
</style>
